<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>接待申请信息详情</title>
</head>
<style>
.fieldset {
	margin-top: 5px;
	margin-bottom: 0px
}

.layui-legend {
	background-color: #5fb878;
	font-size: 15px !important;
	width: 140px;
}

.layui-form-item {
	margin-bottom: 5px;
	clear: both;
	*zoom: 1;
}

.layui-form-label {
	width: 150px;
}
</style>
<body>
	<div class="layui-fluid" >
		<div class="layui-card" > 
			<div class="layui-card-body">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li lay-id="0" class="layui-this"><B>表单信息</B></li>
						<li lay-id="1"><B>审批信息</B></li>
					</ul>
					<div class="layui-tab-content">
						
						<div class="layui-tab-item layui-show" >
							<form class="layui-form" id="addInfo_form" >
							<fieldset class="layui-elem-field layui-field-title fieldset" id="baseInfo">
							<legend class="layui-btn layui-legend" style="text-align: left; cursor: default;">接待信息 ></legend>
							<div style="margin-top: 20px">
								<div class="layui-form-item">
									<div class="layui-inline" >
										<label class="layui-form-label">申请公司</label>
										<div class="layui-input-inline">
											<input type="text" value="${serveRecordVo.orgName}"
												style="border: 0px;" readonly="readonly" class="layui-input">
										</div>
									</div>
									<div class="layui-inline" >
										<label class="layui-form-label">申请部门</label>
										<div class="layui-input-inline">
											<input type="text" value="${serveRecordVo.deptName}" style="border: 0px;"
												readonly="readonly" class="layui-input">
										</div>
									</div>
									<div class="layui-inline" >
										<label class="layui-form-label">申请人</label>
										<div class="layui-input-inline">
											<input type="text" name="staffName" value="${serveRecordVo.staffName}"
												readonly="readonly" style="border:0px" autocomplete="off"
												class="layui-input" >																								
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline" >
										<label class="layui-form-label" >接待日期</label>
										<div class="layui-input-inline" >
											<input type="text" value="<fmt:formatDate value="${serveRecordVo.serveDate}" pattern="yyyy-MM-dd"/>" id="receptionDate" name="serveDate"  style="border:0px;"  class="layui-input" >
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">申请事由</label>
										<div class="layui-input-inline">
											<textarea class="layui-textarea" readonly
												style="width: 899px; height: 90px;" name="applyReason">${serveRecordVo.applyReason}
											</textarea>
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">来访单位</label>
										<div class="layui-input-inline">
											<textarea class="layui-textarea" readonly
												style="width: 899px; height: 90px;" name="visitOrg">${serveRecordVo.visitOrg}	
											</textarea>
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">来访领导名单</label>
										<div class="layui-input-inline">
											<textarea class="layui-textarea" readonly
												style="width: 899px; height: 90px;" name="visitLeaders">${serveRecordVo.visitLeaders}
											</textarea>
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">出席领导名单</label>
										<div class="layui-input-inline">
											<textarea class="layui-textarea" readonly
												style="width: 899px; height: 90px;" name="ourLeaders">${serveRecordVo.ourLeaders}
											</textarea>
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">会议日期</label>
										<div class="layui-input-inline">
											<input type="text" value="<fmt:formatDate value="${serveRecordVo.meetingDate}" pattern="yyyy-MM-dd"/>" lay-verify="required"  name="meetingDate" style="border:0px;"
												class="layui-input" >
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">会议室</label>
										<div class="layui-input-inline">
											<input type="text" value="${serveRecordVo.roomName}" lay-verify="required"  name="roomName" style="border:0px;"
												class="layui-input" >
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">会议开始时间</label>
										<div class="layui-input-inline">
											<input type="text" value="<fmt:formatDate value="${serveRecordVo.meetingStartTime}" pattern="HH:mm:ss"/>" lay-verify="required"
												id="meetingStartTime" name="meetingStartTime" style="border:0px;"
												class="layui-input" >
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">会议结束时间</label>
										<div class="layui-input-inline">
											<input type="text" value="<fmt:formatDate value="${serveRecordVo.meetingEndTime}" pattern="HH:mm:ss"/>" lay-verify="required"
												id="meetingEndTime" name="meetingEndTime" style="border:0px;"
												class="layui-input" >
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">是否需要投影</label>
										<div class="layui-input-inline">
										    <c:if test="${serveRecordVo.projectorFlag == '1'}">
										    	<input type="text" value="是" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										    <c:if test="${serveRecordVo.projectorFlag == '0'}">
										    	<input type="text" value="否" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>																					
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">是否需要茶水</label>
										<div class="layui-input-inline">
											<c:if test="${serveRecordVo.teaFlag == '1'}">
										    	<input type="text" value="是" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										    <c:if test="${serveRecordVo.teaFlag == '0'}">
										    	<input type="text" value="否" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">是否需要鲜花</label>
										<div class="layui-input-inline">
											<c:if test="${serveRecordVo.flowerFlag == '1'}">
										    	<input type="text" value="是" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										    <c:if test="${serveRecordVo.flowerFlag == '0'}">
										    	<input type="text" value="否" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										</div>
									</div>
								</div>
								
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">是否需要水果</label>
										<div class="layui-input-inline">
											<c:if test="${serveRecordVo.fruitsFlag == '1'}">
										    	<input type="text" value="是" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										    <c:if test="${serveRecordVo.fruitsFlag == '0'}">
										    	<input type="text" value="否" 
													style="border:0px;" readonly="readonly" class="layui-input">
										    </c:if>
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label" >对方联系人姓名</label>
										<div class="layui-input-inline" >
											<input type="text" value="${serveRecordVo.linkName}" lay-verify="required"
												name="unname" class="layui-input"  style="border:0px;" >
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">对方联系人电话</label>
										<div class="layui-input-inline">
											<input type="text" value="${serveRecordVo.linkPhone}" lay-verify="required" name="unname" class="layui-input"  style="border:0px;" >
										</div>
									</div>
								</div>
								<div class="layui-form-item" >
									<div class="layui-inline" >
										<label class="layui-form-label">费用申请</label>
										<div class="layui-input-inline">
											<textarea lay-verify="required" maxlength="100"  class="layui-textarea"
												style="width: 899px; height: 90px;border:0px;" name="unname" >${serveRecordVo.costApply}
											</textarea>
										</div>
									</div>
								</div>						
							</div>
						</fieldset>
								<fieldset class="layui-elem-field layui-field-title fieldset" >
									<legend class="layui-btn layui-legend" style="text-align: left; cursor: default;" >附件信息 ></legend>
									<div style="margin-top: 20px;">
										<div class="layui-form-item">
											<label class="layui-form-label" style="width: 350px;">支持pdf、excel、word、图片资料，可上传多个</label>
										</div>
										<div class="layui-form-item">
											<label class="layui-form-label" >接待方案</label>
											<div class="layui-input-block">
												<div class="layui-upload">
													<div class="layui-upload-list" id="1-upload-more-list">
																<c:forEach items="${serveRecordVo.serveRecordAtts}" var="fileAtt">
																	<c:if test="${fileAtt.types == '1' }">
																		<div class="layui-upload-img-div">
																			<c:choose>
																				<c:when
																					test="${fileAtt.fileSuffix == '.jpg' or fileAtt.fileSuffix == '.jpeg' or fileAtt.fileSuffix == '.png'}">
																					<img src="${fileHttpPre }/${fileAtt.filePath }"
																						title="${fileAtt.fileName}"
																						class="layui-upload-img">
																				</c:when>
																				<c:otherwise>
																					<img src="${ctx}/resources/images/${fn:substring(fileAtt.fileSuffix,1,5)}.jpg"
																						title="${fileAtt.fileName}"
																						class="layui-upload-img">
																				</c:otherwise>
																			</c:choose>
																			<div class="mask">
																				<a href="javascript:void(0)"
																					style="margin-left: 32px"
																					onclick="showImg('${fileHttpPre}/${fileAtt.filePath }');">查看</a>
																			</div>
																			<p>${fileAtt.fileName}</p>
																		</div>
																	</c:if>
																</c:forEach>
															</div>
												</div>
											</div>
										</div>
										<div class="layui-form-item" >
											<label class="layui-form-label" >其他附件</label>
											<div class="layui-input-block" >
												<div class="layui-upload"  >
													<div class="layui-upload-list" id="1-upload-more-list">
																<c:forEach items="${serveRecordVo.serveRecordAtts}" var="fileAtt">
																	<c:if test="${fileAtt.types == '2' }">
																		<div class="layui-upload-img-div">
																			<c:choose>
																				<c:when
																					test="${fileAtt.fileSuffix == '.jpg' or fileAtt.fileSuffix == '.jpeg' or fileAtt.fileSuffix == '.png'}">
																					<img src="${fileHttpPre }/${fileAtt.filePath }"
																						title="${fileAtt.fileName}"
																						class="layui-upload-img">
																				</c:when>
																				<c:otherwise>
																					<img
																						src="${ctx}/resources/images/${fn:substring(fileAtt.fileSuffix,1,5)}.jpg"
																						title="${fileAtt.fileName}"
																						class="layui-upload-img">
																				</c:otherwise>
																			</c:choose>
																			<div class="mask">
																				<a href="javascript:void(0)"
																					style="margin-left: 32px"
																					onclick="showImg('${fileHttpPre}/${fileAtt.filePath }');">查看</a>
																			</div>
																			<p>${fileAtt.fileName}</p>
																		</div>
																	</c:if>
																</c:forEach>
															</div>
												</div>
											</div>
										</div>
									</div>
								</fieldset>							

							</form>
						</div>


						<!-- 引入公共流程渲染页面   -->
						<%@ include file="../include/flowPublic.jsp"%>

						<!-- 审批时 显示 通过/拒绝按钮   -->
						<c:if test="${'y'==processDealWith}">
							<fieldset class="layui-elem-field layui-field-title fieldset"
								style="text-align: center;">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<input
											class="layui-btn layuiadmin-btn-admin layui-btn-normal "
											style="margin-top: 6px;" type="button"
											data-type="to_pass_submit" id="to_pass_submit" value="审批通过">
										<input
											class="layui-btn layuiadmin-btn-admin layui-btn-primary "
											style="margin-top: 6px;" type="button"
											data-type="to_refuse_submit" id="to_refuse_submit"
											value="审批终止">
									</div>
								</div>
							</fieldset>
						</c:if>

						<!-- 审批意见  -->
						<form class="layui-form" id="flow_process_form"
							style="display: none">
							<input type="hidden" name="state" id="flow_process_form_state" />
							<input type="hidden" name="srcBizSguid"
								value="${modelDetail.id }" /> <input type="hidden"
								name="processId" value="${modelDetail.processId }" />
							<div class="layui-form-item" style="padding-top: 10px">
								<label class="layui-form-label">审批结果</label>
								<div class="layui-input-inline">
									<input type="text" style="border: 0px;" readonly="readonly"
										class="layui-input" id="flow_process_form_state_txt">
								</div>
							</div>
							<div class="layui-form-item" style="padding-top: 10px">
								<label class="layui-form-label">审批意见</label>
								<div class="layui-input-inline">
									<textarea name="dealIdea" placeholder="请输入审批意见"
										lay-verify="required" class="layui-textarea"
										style="width: 475px; height: 145px;"></textarea>
								</div>
							</div>
							<fieldset class="layui-elem-field layui-field-title"
								style="margin-top: 15px;">
								<legend class="layui-btn layui-legend"
									style="text-align: left; cursor: default;">
									附件信息 > <label class="layui-form-label" style="width: 100%;">支持pdf、excel、word、图片资料，可上传多个
									</label>
								</legend>
							</fieldset>
							<div class="layui-form-item" style="margin-top: 10px;">
								<label class="layui-form-label">附件资料</label>
								<div class="layui-input-block">
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="upload-more">上传</button>
										<div class="layui-upload-list" id="upload-more-list"></div>
									</div>
								</div>
							</div>
							<div class="layui-form-item layui-hide">
								<input type="button" lay-submit
									lay-filter="flow_process_from_submit"
									id="flow_process_from_submit" value="确认">
							</div>
						</form>

					</div>
				</div>
			</div>




		</div>
	</div>
	<script>
		//静态资源路径前缀
		var staticPath = '${fileHttpPre}';
		var stateJSON = <infopub:dicJson groupNo="A00010028" />;

		
		  layui.config({
			    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
			  }).extend({
			    index: 'lib/index' //主入口模块
			  }).use(['index', 'set', 'upload', 'element', 'laydate'], function(){
			    var $ = layui.$
			    ,form = layui.form
			    ,element = layui.element
			    ,laydate = layui.laydate
			    ,table = layui.table
			    ,upload = layui.upload;
			    
			    form
				.verify({
					CHS : [ /^[\u0391-\uFFE5]+$/, '只能输入汉字' ],
					intNumber : [ /^[1-9]\d*$/, '请输入正确的数字' ],
					floatNumber : [
							/^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
							'请输入正确的数字' ],
					floatAmount : [
							/^([1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
							'请输入正确的数字' ]
				});
		var laydate = layui.laydate;
		laydate.render({
			elem : '#applyDate'
		});
		laydate.render({
			elem : '#useDate'
		});
		$('.decimal').on(
				'keyup',
				function() {
					var val = this.value.replace(
							/^(\-)*(\d+)\.(\d\d).*$/,
							'$1$2.$3');
					var val2 = val.replace(/[^0-9.]/g, "");
					this.value = val2;
				});
			    
			    
			    element.on('tab(docDemoTabBrief)', function(data) {
			    });
			    
			    upload.render({
				      elem: '#upload-more'
				      ,url: basePath + '/flowProcess/uploadAtt/'
				      ,multiple: true
				      ,accept: 'file'
				      ,acceptMime: 'application/zip,application/x-rar-compressed,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
				   	  ,before: function(obj){ //obj参数包含的信息
				   		    layer.load(); //上传loading
				   		  }
				      ,done: function(res){
				    	  //如果上传失败
				          if(res.code > 0){
				        	  layer.closeAll('loading'); //关闭loading
				        	  return layer.msg(res.msg,{icon: 7});
				          }
				          //上传完毕
				   	  	  if(res.entity != null && res.entity.length > 0){
							for(var i in res.entity){
								var contractExtAtt = res.entity[i];
								var arr = contractExtAtt.split("|");
								var imgSrc = "";
								var suffix = arr[0].substring(arr[0].lastIndexOf(".")+1,arr[0].length);
								if(suffix == 'jpg' || suffix == 'png'){
									imgSrc = "${fileHttpPre}/"+arr[2];
								}else{
									imgSrc = "${ctx}/resources/images/"+suffix+".jpg";
								}
				        		$('#upload-more-list').append('<div class="layui-upload-img-div" id="upload_img_'+arr[1]+'"><img src="'+imgSrc+'" title="'+ arr[0] +'" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\''+"${fileHttpPre}"+arr[2] +'\');">查看</a><a href="javascript:void(0)" onclick="del(\''+arr[1]+'\')";>删除</a></div><p>'+arr[0]+'</p><input type="hidden" value="'+serveRecordAtt+'" id="fileAtt_'+arr[1]+'" name="fileAtts" ></input></div> ');
							}
					  	  }
				      }
				      ,allDone: function(obj){ //当文件全部被提交后，才触发
				    	  layer.closeAll('loading'); //关闭loading
				      }
				      ,error: function(){
				    	  layer.closeAll('loading'); //关闭loading
				          //上传失败
				          layer.msg("上传失败，请稍后再试~",{icon: 7});
				        }
				    });
				 	// 按钮事件
				    var active = {
				    	to_pass_submit: function(){
				    	  $('#flow_process_form_state').val("1");	
				    	  $('#flow_process_form_state_txt').val("审批通过");	
				          layer.open({
				        	  type: 1
				        	  ,title: '审批通过确认'
				        	  ,content: $('#flow_process_form')
				        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
				        	  ,btn: ['确定', '取消']
				        	  ,btnAlign: 'c'
				        	  ,yes: function(index, layero){
				        		  var submitID = 'flow_process_from_submit'
				            		,submit = layero.contents().find('#'+ submitID);
				        		  //监听提交
				        		  form.on('submit('+ submitID +')', function(data){
				        			var field = data.field; //获取提交的字段
			      		  		layer.load();
			      		       	//提交 Ajax 成功后，静态更新表格中的数据
			      		       	$.ajax({
			      		           	type : 'post',
			      					url : basePath + "/flowProcess/dealWith",
			      					data: $('#flow_process_form').serialize(),
			      					success:function(result){
			      						if(result.success){
			      							layer.closeAll('loading'); //关闭loading
			      							layer.msg('处理成功~',{icon: 1});
			      							//两秒后关闭当前页面
			      							setTimeout(function(){
			      								// 刷新首页 
			      								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
			      								iframe[0].contentWindow.location.reload(true);
			      								top.layui.admin.closeThisTabs(); // 关闭当前标签页
			      						        }, 2000);
			      						}else{
			      							layer.closeAll('loading'); //关闭loading
			      							layer.msg(result.msg,{icon: 7});
			      					  	}
			      					}
			      		       	});
				            	});  
				            submit.trigger('click');
				          }
				        }); 
				      },
				      to_refuse_submit: function(){
				    	  $('#flow_process_form_state').val("0");
				    	  $('#flow_process_form_state_txt').val("审批终止");
				          layer.open({
				        	  type: 1
				        	  ,title: '审批终止确认'
				        	  ,content: $('#flow_process_form')
				        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
				        	  ,btn: ['确定', '取消']
				        	  ,btnAlign: 'c'
				        	  ,yes: function(index, layero){
				        		  var submitID = 'flow_process_from_submit'
				            		,submit = layero.contents().find('#'+ submitID);
				        		  //监听提交
				        		  form.on('submit('+ submitID +')', function(data){
				        			var field = data.field; //获取提交的字段
			    		  		layer.load();
			    		       	//提交 Ajax 成功后，静态更新表格中的数据
			    		       	$.ajax({
			    		           	type : 'post',
			    					url : basePath + "/flowProcess/dealWith",
			    					data: $('#flow_process_form').serialize(),
			    					success:function(result){
			    						if(result.success){
			    							layer.closeAll('loading'); //关闭loading
			    							layer.msg('处理成功~',{icon: 1});
			    							//两秒后关闭当前页面
			    							setTimeout(function(){
			    								// 刷新首页 
			    								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
			    								iframe[0].contentWindow.location.reload(true);
			    								top.layui.admin.closeThisTabs(); // 关闭当前标签页
			    						        }, 2000);
			    						}else{
			    							layer.closeAll('loading'); //关闭loading
			    							layer.msg(result.msg,{icon: 7});
			    					  	}
			    					}
			    		       	});
				            	});  
				            submit.trigger('click');
				          }
				        }); 
				      }
				    }  
				    // data-type事件
				    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
				      var type = $(this).data('type');
				      active[type] ? active[type].call(this) : '';
				    });
				  	
				  });
		  
				//删除文件
				function del(index){
					layui.$("#fileAtt_"+index).remove();
					layui.$("#upload_img_"+index).remove();
				}

				//根据url查看文件
				function showImg(url){
					var openWin = window.open(url,'','left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
				}
	</script>
</body>
</html>

